<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素内容01</title>
		<!-- 01_元素内容操作：元素以及元素内容的部分
			 .html()  无参--功能：获取匹配元素种第一元素内容
					  有参--功能：将匹配元素集合中所有元素替换为新元素
					  
			 .val()   无参--功能：表单内元素：input select生效
						获取匹配元素中第一个元素的内容
					  有参--功能：表单内元素是：input select生效
					    input元素直接显示 value 
						select元素不是直接显示
						
			 .text()  无参：获取 匹配集合所有内容
					  有参 匹配内容然后替换
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>html()函数使用</h1>
		<button>按钮-针对html()函数</button>
		
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat autem vel architecto veritatis aspernatur harum rerum odit! Aliquid ratione, libero eligendi, ex voluptate adipisci expedita veniam dolore, sunt eum quisquam.
		</span>
		<span>lorem2</span>
		<h1>val()函数使用</h1>
		<button>按钮-针对val（）函数</button>
		<input type="text" value="文本框真实的数据"/>
		<input type="text" placeholder="输入框显示">
		
		<select name="1" id="2">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		
		<br />
		<h1>text()函数使用</h1>
		<button class="btn1">text有参</button>
		<button class="btn2">text无参</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>Lorem ipsum dolor sit amet consectetur.</p>
		<script>
			//js变量： var 变量名=值，元素
			// 无参数 html() 函数使用
			// var html=$("span").html();
			//BOM打印数据
			// alert(html);
			// $("button").click(function(){
			// 	$("span").html("<span>lorem1</span>");
			// });
			
			//效果：点击按钮 获取第一个表单元素内容，打印出来
			// $("button").click(function(){
			// 	//注意 in是关键字 
			// 	var html=$("input").val();
			// 	alert(html);
			// });
			// $("button").click(function(){
			// 	var gou=$("select").val("1");
			// 	alert(gou);
				
			// });
			
			
			$("button.btn1").click(function(){
				alert($("p").text())
			});
			$("button.btn2").click(function(){
				
				alert($("p").text("修改文本"))
			});
			
		</script>
	</body>
</html>